import React, { Component } from 'react';

import ListViews from "../components/ListViews/ListViews";

class test extends Component {

  state = {
    siterList: [], // 列表
    loadCountPage: 0,  // 总页数
    currentPage: 1, // 当前页数
  }

  componentDidMount() {
    // this.reqSiterQuery()
  }

  reqSiterQuery = async (page = 1) => {
    const { siterList } = this.state;
    const code = 0;
    const count = 33
    const list = [1,2,3,4,5,6,7,8,9,10]
    if (code === 0) {
      const newList = page === 1 ? list : siterList.concat(list);
      this.setState({
        currentPage: page,
        loadCountPage: Math.ceil(count / 10),
        siterList: newList,
      })
    }
  }

  render() {

    const { siterList, loadCountPage, currentPage } = this.state;

    return (
      <div className="text">

        <div className="HeadFoot">
          <ListViews 
            list={siterList}
            loadCountPage={loadCountPage} 
            currentPage={currentPage} 
            setList={(page) => this.reqSiterQuery(page)} 
            renderRow={(rowData, sectionID, rowID) => renderRow(rowData, sectionID, rowID, this)}
          />
        </div>

      </div>
    );
  }
}

export default test;

const renderRow = (rowData, sectionID, rowID, that) => {
  console.log("rowData, sectionID, rowID", rowData, sectionID, rowID)
  return (
    <div key={rowID} style={{marginBottom: 30, textAlign:"center"}}>
      <div>展示所选场地在所选日期下的每个时段的预定概况{rowData}</div>
      <div>展示所选场地在所选日期下的每个时段的预定概况{rowData}</div>
      <div>展示所选场地在所选日期下的每个时段的预定概况{rowData}</div>
      <div>展示所选场地在所选日期下的每个时段的预定概况{rowData}</div>
      <div>展示所选场地在所选日期下的每个时段的预定概况{rowData}</div>
    </div>
  )
}